<template>
  <div>
    <web-header show="group" />
    <div class="title_a" style="padding-top: 30px">
      <div class="title_en">Site resources</div>
      <div class="title_cn">场地资源</div>
      <div class="title_txt">
        20+家合作拓展培训基地，34+会议室，深圳及周边城市100+酒店
      </div>
    </div>
    <div class="nav_b">
      <ul>
        <li><a @click="changeList(86)" href="javascript:void(0)">广州团建基地</a></li>
        <li><a @click="changeList(90)" href="javascript:void(0)">深圳团建基地</a></li>
        <li><a @click="changeList(89)" href="javascript:void(0)">河源团建基地</a></li>
        <li><a @click="changeList(88)" href="javascript:void(0)">清远团建基地</a></li>
        <li><a @click="changeList(87)" href="javascript:void(0)">惠州团建基地</a></li>
        <li><a @click="changeList(91)" href="javascript:void(0)">东莞团建基地</a></li>
        <li><a @click="changeList(92)" href="javascript:void(0)">佛山团建基地</a></li>
      </ul>
    </div>
    <div class="box_a">
      <ul>
        <li v-for="rs in list" :key="rs.id">
          <router-link target="_blank" :to="`/group/address/${rs.id}`">
            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
            <h3>{{ rs.title }}</h3>
            <span>{{ rs.intro }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <web-footer />
    <back-top />
  </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { group_items } from "@/api/travel.js";
import { useRoute } from "vue-router";
const route = useRoute();

// 后续内容变多做懒加载
let list = ref([]);
let changeList = async (type3) => {
  let res = await group_items({
    ctype: 72,
    type3,
    page: 1,
    limit: 20,
  });
  list.value = res.data;
};

onMounted(async () => {
  let ajax = {
    ctype: 72,
    page: 1,
    limit: 20,
  }
  if (route.query.id) {
    ajax.type3 = route.query.id - 0;
  }
  let res = await group_items(ajax);
  list.value = res.data;
});

</script>

<style lang="scss" scoped>
@import "../../css/main_group_address_list.css";
</style>
